// 因为整个网站都要请求同一个后台，为了方便管理，如：后端说换一个服务器地址，就直接在这改就行了，不然只能在每个我也的 axios url 地址那里改，特别麻烦
// 配置了 基地址 后 直接改这里就行了   大大地提高了可维护性

// axios 公共配置
// 基地址
axios.defaults.baseURL = 'http://geek.itheima.net'

/* 1. 什么是 axios 请求拦截器？
✓ 发起请求之前，调用的一个函数，对请求参数进行设置
2. axios 请求拦截器，什么时候使用？
✓ 有公共配置和设置时，统一设置在请求拦截器中 */

// 这个拦截器的框架是在 axios 官网复制的
// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    // 2.1 在 utils/request.js 设置请求拦截器，统一携带 token
    // 统一携带 token 令牌字符串在请求头上
    const token = localStorage.getItem('token')
    // 如果有 token 执行 (config.headers.Authorization = `Bearer ${token}`)
    //  config.headers 设置请求头   Authorization 接口文档参数    Bearer token值  接口文档参数值的格式
    token && (config.headers.Authorization = `Bearer ${token}`)
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

/* 1. 什么是 axios 响应拦截器？
✓ 响应回到 then/catch 之前，触发的拦截函数，对响应结果统一处理
2. axios 响应拦截器，什么时候触发成功/失败的回调函数？
✓ 状态为 2xx 触发成功回调，其他则触发失败的回调函数 */

/* axios 响应拦截器：响应回到 then/catch 之前，触发的拦截函数，对响应结果统一处理
例如：身份验证失败，统一判断并做处理 */

// 这个拦截器的框架是在 axios 官网复制的
// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    // 例如：直接返回服务器的响应结果对象     也就是说：成功的话 返回一部分需要的数据 这样可以少写一个 .data
    const result = response.data
    return result
    // return response
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    //  例如：  统一对 401 省身份验证失败情况做出处理    修改 本地存储的 token 值，使他达到过期的效果
    console.dir(error) // 详细打印 error 对象
    console.log(error.response.status) // 打印当前状态码
    // ? 可选链式操作符  意思是?前面有值才访问后面的属性  不然如果找不到  response 会报错
    if (error?.response?.status === 401) {
      alert('身份验证失败，请重新登录') // 弹框提示
      // localStorage.clear() // 不推荐 清空本地存储   因为 token 已经没用了
      // 这里不推荐 清空本地存储 因为现在做的是练习，其他练习的数据有些是保存到本地存储里面的，清空本地存储 全部都没了，以前的练习存入本地存储都不见了 所以现在推荐使用 删除本地存储的 token 就行了
      localStorage.removeItem('token') // 推荐 删除本地存储的 token  因为 token 已经没用了
      location.href = '../login/index.html' // 跳转到登录页面
    }
    return Promise.reject(error)
  }
)
